<template>
  <div class="">
    <DataManipulation
      :title="$route.query.title"
      formRef="addContractProjectRef"
      :submitButton="submitButton"
      :formList="formList"
      :form="form"
      :rules="rules"
      :buttonList="buttonList"
      @verifiedPassed="submitForm"
      style="margin: 0 20px 0 13px"
    >
      <template #secondHalf>
        <el-form>
          <el-form-item label="备注" prop="remark">
            <el-input
              type="textarea"
              :rows="4"
              placeholder="请输入内容"
              v-model="form.remark"
              style="width: 90%"
              maxlength="200"
              show-word-limit
              :disabled="$route.query.title == '查看项目信息'"
              :class="{
                'input-limit-reached': form.remark && form.remark.length >= 200,
              }"
            >
            </el-input>
          </el-form-item>
        </el-form>
        <div>
          <el-row :gutter="20">
            <el-col :span="12">
              <div style="display: flex; align-items: center; padding: 10px">
                <div
                  style="
                    background-color: #39f;
                    width: 4px;
                    height: 20px;
                    margin-right: 10px;
                    border-radius: 3px;
                  "
                ></div>
                <div>项目所属进项合同</div>
                <div
                  style="margin-left: auto"
                  v-if="
                    $route.query.title == '修改项目信息' ||
                    $route.query.title == '新增项目信息'
                  "
                >
                  <el-button type="primary" plain @click="enterContract"
                    >添加</el-button
                  >
                  <el-button
                    type="danger"
                    plain
                    @click="delForEnterTableListByList"
                    >删除</el-button
                  >
                </div>
              </div>
              <div
                style="
                  width: 98%;
                  border: 1px solid #ccc;
                  padding: 10px 10px 10px 10px;
                  border-radius: 5px;
                  margin-bottom: 20px;
                "
              >
                <el-form
                  :model="enterContractForm"
                  v-if="$route.query.title == '查看项目信息'"
                  style="display: flex; align-items: center"
                >
                  <div style="display: flex; align-items: center">
                    <p style="width: 50%">合同名称</p>
                    <el-input
                      v-model="enterContractForm.name"
                      clearable
                      style="width: 50%"
                    ></el-input>
                  </div>

                  <div style="display: flex; align-items: center">
                    <p style="width: 50%">合同类别</p>
                    <el-select
                      v-model="enterContractForm.contractCategoryId"
                      placeholder="请选择"
                      clearable
                      style="width: 50%"
                    >
                      <el-option
                        v-for="item in ContractCategory"
                        :key="item.contractCategoryId"
                        :label="item.name"
                        :value="item.contractCategoryId"
                      >
                      </el-option>
                    </el-select>
                  </div>

                  <div style="display: flex; align-items: center">
                    <p style="width: 50%">签约方</p>
                    <el-input
                      v-model="enterContractForm.partyString"
                      clearable
                      style="width: 60%"
                    ></el-input>
                  </div>

                  <div style="display: flex; align-items: center">
                    <el-tooltip
                      class="item"
                      effect="dark"
                      content="查询"
                      placement="top"
                    >
                      <el-button
                        icon="el-icon-search"
                        circle
                        @click="FindByEnterTableList"
                      />
                    </el-tooltip>
                    <el-tooltip
                      class="item"
                      effect="dark"
                      content="重置"
                      placement="top"
                    >
                      <el-button
                        icon="el-icon-refresh-left"
                        circle
                        @click="FindByEnterTableListClear"
                      />
                    </el-tooltip>
                  </div>
                </el-form>
                <el-table
                  :data="enterTableList"
                  style="width: 100%; border: 1px solid #ccc"
                  :fit="true"
                  header-align="center"
                  height="350"
                  :header-cell-style="{
                    background: 'rgb(224, 241, 255)',
                    color: '#606266',
                  }"
                  @selection-change="handleSelectionChangeForEnterTableList"
                >
                  <el-table-column type="selection" width="55" align="center" />
                  <el-table-column
                    type="index"
                    label="序号"
                    align="center"
                    width="80"
                    fixed="left"
                  />
                  <el-table-column label="合同名称" align="center" width="120">
                    <template #default="scope">
                      <div>
                        <el-tooltip
                          class="item"
                          effect="dark"
                          :content="scope.row.contract.name"
                          placement="top"
                        >
                          <p>
                            {{ scope.row.contract.name }}
                          </p>
                        </el-tooltip>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="合同编码"
                    prop="contract.code"
                    align="center"
                    width="120"
                  />
                  <el-table-column label="合同类别" align="center" width="120">
                    <template #default="scope">
                      {{ scope.row.contract.contractCategoryName }}
                    </template>
                  </el-table-column>
                  <el-table-column label="签约方" align="center" width="180">
                    <template #default="scope">
                      <div
                        v-for="(item, index) in scope.row.contractPartyNameList"
                        :key="index"
                      >
                        <el-tooltip
                          class="item"
                          effect="dark"
                          :content="item"
                          placement="top"
                        >
                          <el-tag
                            type="info"
                            class="slot4"
                            style="border-radius: 20px; color: rgb(53, 55, 54)"
                          >
                            {{ item }}
                          </el-tag>
                        </el-tooltip>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="操作"
                    align="center"
                    width="80"
                    fixed="right"
                  >
                    <template #default="scope">
                      <div v-if="$route.query.title !== '查看项目信息'">
                        <el-tooltip
                          class="item"
                          effect="dark"
                          content="删除"
                          placement="top"
                        >
                          <svg-icon
                            class-name="icon"
                            icon-class="del"
                            style="height: 24px; width: 24px"
                            @click="delForEnterTableList(scope.row)"
                          />
                        </el-tooltip>
                      </div>
                      <div v-if="$route.query.title == '查看项目信息'">
                        <el-tooltip
                          class="item"
                          effect="dark"
                          content="查看"
                          placement="top"
                        >
                          <svg-icon
                            class-name="icon"
                            icon-class="see"
                            style="height: 24px; width: 24px"
                            @click="handleUpdate(scope.row)"
                          />
                        </el-tooltip>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-col>
            <el-col :span="12">
              <div style="display: flex; align-items: center; padding: 10px">
                <div
                  style="
                    background-color: #39f;
                    width: 4px;
                    height: 20px;
                    margin-right: 10px;
                    border-radius: 3px;
                  "
                />
                <div>项目所属销项合同</div>
                <div
                  style="margin-left: auto"
                  v-if="
                    $route.query.title == '修改项目信息' ||
                    $route.query.title == '新增项目信息'
                  "
                >
                  <el-button type="primary" plain @click="destroyContract"
                    >添加</el-button
                  >
                  <el-button
                    type="danger"
                    plain
                    @click="delForDestroyTableListByList"
                    >删除</el-button
                  >
                </div>
              </div>
              <div
                style="
                  width: 98%;
                  border: 1px solid #ccc;
                  padding: 10px 10px 10px 10px;
                  border-radius: 5px;
                  margin-bottom: 20px;
                "
              >
                <el-form
                  :model="destroyContractForm"
                  style="display: flex; align-items: center"
                  v-if="$route.query.title == '查看项目信息'"
                >
                  <div style="display: flex; align-items: center">
                    <p style="width: 50%">合同名称</p>
                    <el-input
                      v-model="destroyContractForm.name"
                      clearable
                      style="width: 50%"
                    ></el-input>
                  </div>

                  <div style="display: flex; align-items: center">
                    <p style="width: 50%">合同类别</p>
                    <el-select
                      v-model="destroyContractForm.contractCategoryId"
                      placeholder="请选择"
                      clearable
                      style="width: 50%"
                    >
                      <el-option
                        v-for="item in ContractCategory"
                        :key="item.contractCategoryId"
                        :label="item.name"
                        :value="item.contractCategoryId"
                      >
                      </el-option>
                    </el-select>
                  </div>

                  <div style="display: flex; align-items: center">
                    <p style="width: 50%">签约方</p>
                    <el-input
                      v-model="destroyContractForm.partyString"
                      clearable
                      style="width: 50%"
                    ></el-input>
                  </div>

                  <div style="display: flex; align-items: center">
                    <el-tooltip
                      class="item"
                      effect="dark"
                      content="查询"
                      placement="top"
                    >
                      <el-button
                        icon="el-icon-search"
                        circle
                        @click="FindByDestroyTableList"
                      />
                    </el-tooltip>
                    <el-tooltip
                      class="item"
                      effect="dark"
                      content="重置"
                      placement="top"
                    >
                      <el-button
                        icon="el-icon-refresh-left"
                        circle
                        @click="FindByDestroyTableListClear"
                      />
                    </el-tooltip>
                  </div>
                </el-form>
                <el-table
                  :data="destroyTableList"
                  style="width: 100%; border: 1px solid #ccc"
                  :fit="true"
                  header-align="center"
                  height="350"
                  :header-cell-style="{
                    background: 'rgb(224, 241, 255)',
                    color: '#606266',
                  }"
                  @selection-change="handleSelectionChangeForDestroyTableList"
                >
                  <el-table-column type="selection" width="55" align="center" />
                  <el-table-column
                    type="index"
                    label="序号"
                    align="center"
                    fixed="left"
                    width="80"
                  />
                  <el-table-column label="合同名称" align="center" width="120">
                    <template #default="scope">
                      <div>
                        <el-tooltip
                          class="item"
                          effect="dark"
                          :content="scope.row.contract.name"
                          placement="top"
                        >
                          <p>
                            {{ scope.row.contract.name }}
                          </p>
                        </el-tooltip>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="合同编码"
                    prop="contract.code"
                    align="center"
                    width="120"
                  />
                  <el-table-column label="合同类别" align="center" width="120">
                    <template #default="scope">
                      {{ scope.row.contract.contractCategoryName }}
                    </template>
                  </el-table-column>
                  <el-table-column label="签约方" align="center" width="180">
                    <template #default="scope">
                      <div
                        v-for="(item, index) in scope.row.contractPartyNameList"
                        :key="index"
                      >
                        <el-tooltip
                          class="item"
                          effect="dark"
                          :content="item"
                          placement="top"
                        >
                          <el-tag
                            type="info"
                            class="slot4"
                            style="border-radius: 20px; color: rgb(53, 55, 54)"
                          >
                            {{ item }}
                          </el-tag>
                        </el-tooltip>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="操作"
                    align="center"
                    width="80"
                    fixed="right"
                  >
                    <template #default="scope">
                      <div v-if="$route.query.title !== '查看项目信息'">
                        <el-tooltip
                          class="item"
                          effect="dark"
                          content="删除"
                          placement="top"
                        >
                          <svg-icon
                            class-name="icon"
                            icon-class="del"
                            style="height: 24px; width: 24px"
                            @click="delForDestroyTableList(scope.row)"
                          />
                        </el-tooltip>
                      </div>
                      <div v-if="$route.query.title == '查看项目信息'">
                        <el-tooltip
                          class="item"
                          effect="dark"
                          content="查看"
                          placement="top"
                        >
                          <svg-icon
                            class-name="icon"
                            icon-class="see"
                            style="height: 24px; width: 24px"
                            @click="handleUpdate(scope.row)"
                          />
                        </el-tooltip>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-col>
          </el-row>
        </div>
      </template>
    </DataManipulation>

    <el-dialog
      :title="contractTitle"
      :visible.sync="contractDialog"
      width="90%"
    >
      <div>
        <el-form :model="contractSearchform" label-width="100px">
          <el-row :gutter="20">
            <el-col :span="4">
              <el-form-item label="合同名称" prop="name" label-width="80px">
                <el-input
                  v-model="contractSearchform.name"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="合同类型" prop="type" label-width="80px">
                <el-select
                  v-model="contractSearchform.type"
                  placeholder="请选择"
                  disabled
                >
                  <el-option
                    v-for="item in contractformList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="合同所属公司" prop="belongingCompanyId">
                <el-select
                  v-model="contractSearchform.belongingCompanyId"
                  placeholder="请选择"
                  disabled
                >
                  <el-option
                    v-for="item in formList[0].labelList[1].components.option
                      .list"
                    :key="item.belongingCompanyId"
                    :label="item.name"
                    :value="item.belongingCompanyId"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item
                label="合同类别"
                prop="contractCategoryName"
                label-width="80px"
              >
                <el-select
                  v-model="contractSearchform.contractCategoryId"
                  placeholder="请选择"
                  clearable
                >
                  <el-option
                    v-for="item in ContractCategory"
                    :key="item.contractCategoryId"
                    :label="item.name"
                    :value="item.contractCategoryId"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item
                label="签约方"
                prop="partyString"
                label-width="80px"
              >
                <el-input
                  v-model="contractSearchform.partyString"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label-width="20px">
                <div style="display: flex; align-items: center">
                  <el-button
                    icon="el-icon-search"
                    @click="enterContract"
                    v-if="contractTitle == '进项合同选择'"
                    >搜索</el-button
                  >

                  <el-button
                    icon="el-icon-search"
                    @click="destroyContract"
                    v-if="contractTitle == '销项合同选择'"
                    >搜索</el-button
                  >
                  <el-button
                    icon="el-icon-refresh-left"
                    @click="EnterClearn"
                    v-if="contractTitle == '进项合同选择'"
                    >重置</el-button
                  >
                  <el-button
                    icon="el-icon-refresh-left"
                    @click="destroyClearn"
                    v-if="contractTitle == '销项合同选择'"
                    >重置</el-button
                  >
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <el-table
        :data="contractList"
        style="width: 100%"
        :fit="true"
        header-align="center"
        :header-cell-style="{
          background: 'rgb(224, 241, 255)',
          color: '#606266',
        }"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column
          type="index"
          label="序号"
          width="80"
          align="center"
          fixed="left"
        />
        <el-table-column
          prop="contract.name"
          label="合同名称"
          align="center"
          fixed="left"
          width="120"
        />
        <el-table-column
          prop="contract.code"
          label="合同编码"
          align="center"
          width="120"
        />
        <el-table-column
          prop="contract.type"
          label="合同类型"
          align="center"
          width="120"
        />
        <el-table-column
          prop="contract.belongingCompanyName"
          label="合同所属公司"
          align="center"
          width="120"
        />
        <el-table-column
          prop="contract.contractCategoryName"
          label="合同类别"
          align="center"
          width="120"
        />
        <el-table-column label="签约方" align="center" width="120">
          <template #default="scope">
            <div
              v-for="(item, index) in scope.row.contractPartyNameList"
              :key="index"
            >
              <el-tag type="info">
                {{ item }}
              </el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="contract.money"
          label="合同总额（元）"
          align="center"
          width="120"
        />
        <el-table-column
          prop="contract.collectionAndPaymentTypes"
          label="收（付）款类型"
          align="center"
          width="120"
        />
        <el-table-column
          prop="contract.collectionAndPaymentState"
          label="收（付）款状态"
          align="center"
          width="120"
        />
        <el-table-column
          prop="contract.state"
          label="开票状态"
          align="center"
          width="120"
        />
        <el-table-column
          prop="contract.belongingYear"
          label="合同归属年份"
          align="center"
          width="120"
        />
        <el-table-column
          prop="contract.signingTime"
          label="签订日期"
          align="center"
          width="120"
        />
        <el-table-column
          prop="contract.effectiveTime"
          label="合同生效日期"
          align="center"
          width="120"
        />
        <el-table-column
          prop="contract.terminationTime"
          label="合同终止日期"
          align="center"
          width="120"
        />
        <el-table-column
          prop="contract.director"
          label="合同负责人"
          align="center"
          width="120"
        />
        <el-table-column
          prop="contract.money"
          label="发票金额（元）"
          align="center"
          width="120"
        />
        <el-table-column
          prop="contract.archiveLocationName"
          label="原件归档位置"
          align="center"
          width="120"
        />
        <el-table-column
          prop="contract.addUserName"
          label="上传者"
          align="center"
          width="120"
        />
        <el-table-column
          prop="contract.addTime"
          label="上传时间"
          align="center"
          width="120"
        />
        <el-table-column
          prop="contract.updateTime"
          label="修改时间"
          align="center"
          width="120"
        />
        <el-table-column
          prop="contract.updateUserName"
          label="修改者"
          align="center"
          width="120"
        />
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="contractDialog = false" style="height: 40px"
          >返 回</el-button
        >
        <el-button
          @click="EnterConfirmSelection()"
          style="height: 40px"
          v-if="contractTitle == '进项合同选择'"
          type="primary"
          >确 定</el-button
        >
        <el-button
          @click="destroyConfirmSelection()"
          v-if="contractTitle == '销项合同选择'"
          style="height: 40px"
          type="primary"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <el-dialog
      title="合同详细"
      :visible.sync="open"
      width="90%"
      append-to-body
      :round="true"
      :round-header="true"
      :close-on-click-modal="false"
    >
      <div>
        <div
          style="
            margin-bottom: 20px;
            border-bottom: 1px solid rgb(223, 228, 237);
            padding-bottom: 3px;
          "
        >
          <div class="tit_box">
            <div :class="aciton == 0 ? 'act_tit' : 'tit'" @click="aciton = 0">
              合同详情
            </div>
            <div :class="aciton == 1 ? 'act_tit' : 'tit'" @click="aciton = 1">
              收付款计划详情
            </div>
            <div
              :class="aciton == index + 2 ? 'act_tit' : 'tit'"
              @click="aciton = index + 2"
              v-for="(item, index) in contractAppendicesList"
            >
              附件-{{ index + 1 }}
            </div>
          </div>
        </div>
        <div v-show="aciton == 0" style="display: flex">
          <div style="width: 50%; background-color: rgb(240, 242, 245)">
            <div style="display: flex; align-items: center; width: 99%">
              <svg-icon
                class-name="icon"
                icon-class="pdf02"
                style="transform: scale(1.5); z-index: 999; margin: 20px"
              />
              <el-tooltip
                class="item"
                effect="dark"
                :content="getFileByContractAppendicesList(url)"
                placement="top-start"
              >
                <p
                  style="
                    white-space: nowrap;
                    max-width: 60%;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                  "
                >
                  {{ getFileByContractAppendicesList(url) }}
                </p>
              </el-tooltip>
              <svg-icon
                class-name="icon"
                icon-class="download02"
                style="
                  transform: scale(1.2);
                  z-index: 999;
                  margin: 20px;
                  margin-left: auto;
                  cursor: pointer;
                "
                @click="download()"
              />
            </div>
            <div
              class="imageView"
              @mouseenter="isHovered = true"
              @mouseleave="isHovered = false"
            >
              <svg-icon
                v-if="isHovered"
                class-name="icon"
                icon-class="right"
                @click="nextPage"
                class="directionRight"
              />
              <svg-icon
                v-if="isHovered"
                class-name="icon"
                icon-class="left"
                @click="prePage"
                class="directionLeft"
              />
              <div class="pdf-container">
                <pdf
                  :page="PdfpageNum"
                  :src="url"
                  @progress="loadedRatio = $event"
                  @num-pages="pageTotalNum = $event"
                  style="width: 100%; margin-left: 10px"
                ></pdf>
              </div>
            </div>
            <div style="margin: 10px; color: rgb(110, 114, 115)">
              当前页数：{{ PdfpageNum }} / {{ pageTotalNum }}
            </div>
          </div>
          <div style="width: 25%; margin: 10px; height: 680px; overflow: auto">
            <div
              style="
                display: flex;
                align-items: center;
                margin-bottom: 10px;
                margin-left: 20px;
              "
            >
              <div class="blueBox"></div>
              <div style="font-size: large">合同信息</div>
            </div>
            <div>
              <el-form
                ref="contractFormRef"
                :model="contractForm"
                :inline="true"
                label-width="80px"
                label-position="top"
                style="margin-left: 20px"
                class="formClass"
              >
                <el-form-item
                  label="合同名称"
                  prop="name"
                  :rules="[
                    {
                      required: true,
                      message: '请输入合同名称',
                      trigger: 'change',
                    },
                  ]"
                >
                  <el-input
                    v-model="contractForm.name"
                    :style="{ width: 'calc(25vw - 50%)' }"
                    clearable
                    disabled
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="合同所属公司"
                  prop="belongingCompanyId"
                  :rules="[
                    {
                      required: true,
                      message: '请输入合同所属公司',
                      trigger: 'change',
                    },
                  ]"
                >
                  <el-select
                    v-model="contractForm.belongingCompanyId"
                    clearable
                    placeholder="请选择"
                    :style="{ width: 'calc(25vw - 50%)' }"
                    disabled
                  >
                    <el-option
                      v-for="item in belongingCompanyList"
                      :key="item.belongingCompanyId"
                      :label="item.name"
                      :value="item.belongingCompanyId"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="合同类型"
                  prop="type"
                  :rules="[
                    {
                      required: true,
                      message: '请输入合同类型',
                      trigger: 'change',
                    },
                  ]"
                >
                  <el-select
                    v-model="contractForm.type"
                    clearable
                    disabled
                    :style="{ width: 'calc(25vw - 50%)' }"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.name"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="合同类别"
                  prop="contractCategoryId"
                  :rules="[
                    {
                      required: true,
                      message: '请输入合同类别',
                      trigger: 'change',
                    },
                  ]"
                >
                  <el-select
                    v-model="contractForm.contractCategoryId"
                    clearable
                    placeholder="请选择"
                    :style="{ width: 'calc(25vw - 50%)' }"
                    disabled
                  >
                    <el-option
                      v-for="item in contractCategoriesList"
                      :key="item.contractCategoryId"
                      :label="item.name"
                      :value="item.contractCategoryId"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="签约方"
                  :rules="[
                    {
                      required: true,
                      message: '请输入签约方',
                      trigger: 'change',
                    },
                  ]"
                >
                  <div
                    v-for="(item, index) in contractPartyNameList"
                    :key="index"
                    style="display: flex; align-items: center; margin-left: 5px"
                  >
                    <p style="min-width: 40px">
                      {{ contractingPartyLabelList[index] }}
                    </p>
                    <el-select
                      v-model="item.value"
                      filterable
                      allow-create
                      :style="{ width: 'calc(15vw)' }"
                      clearable
                      disabled
                      default-first-option
                      placeholder="请选择或是输入"
                    >
                      <el-option
                        v-for="element in contractingPartyValueList"
                        :key="element.name"
                        :label="element.name"
                        :value="element.name"
                      >
                      </el-option>
                    </el-select>
                  </div>
                </el-form-item>
                <el-form-item
                  label="合同生效日期"
                  prop="effectiveTime"
                  :rules="[
                    {
                      required: true,
                      message: '请输入合同生效日期',
                      trigger: 'change',
                    },
                  ]"
                >
                  <el-date-picker
                    v-model="contractForm.effectiveTime"
                    type="date"
                    disabled
                    placeholder="选择日期"
                    format="yyyy-MM-dd"
                    :style="{ width: 'calc(25vw - 50%)' }"
                    value-format="yyyy-MM-dd"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item
                  label="合同终止日期"
                  prop="terminationTime"
                  :rules="[
                    {
                      required: true,
                      message: '请输入合同生效日期',
                      trigger: 'change',
                    },
                  ]"
                >
                  <el-date-picker
                    v-model="contractForm.terminationTime"
                    type="date"
                    disabled
                    placeholder="选择日期"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    :style="{ width: 'calc(25vw - 50%)' }"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item
                  label="合同签订时间"
                  prop="signingTime"
                  :rules="[
                    {
                      required: true,
                      message: '请输入合同签订时间',
                      trigger: 'change',
                    },
                  ]"
                >
                  <el-date-picker
                    v-model="contractForm.signingTime"
                    type="date"
                    disabled
                    placeholder="选择日期"
                    format="yyyy-MM-dd"
                    :style="{ width: 'calc(25vw - 50%)' }"
                    value-format="yyyy-MM-dd"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item
                  label="合同归属年份"
                  prop="belongingYear"
                  :rules="[
                    {
                      required: true,
                      message: '请输入合同归属年份',
                      trigger: 'change',
                    },
                  ]"
                >
                  <el-date-picker
                    v-model="contractForm.belongingYear"
                    type="year"
                    placeholder="选择年"
                    :style="{ width: 'calc(25vw - 50%)' }"
                    disabled
                    format="yyyy"
                    value-format="yyyy"
                  />
                </el-form-item>
                <el-form-item label="合同金额" prop="money">
                  <el-input
                    v-model="contractForm.money"
                    disabled
                    :style="{ width: 'calc(25vw - 50%)' }"
                    clearable
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="收（付）款类型"
                  prop="collectionAndPaymentTypes"
                  v-if="
                    contractForm.money !== '' ||
                    contractForm.money !== null ||
                    contractForm.money !== undefined
                  "
                >
                  <el-select
                    v-model="contractForm.collectionAndPaymentTypes"
                    clearable
                    placeholder="请选择"
                    :style="{ width: 'calc(25vw - 50%)' }"
                    disabled
                  >
                    <el-option
                      v-for="item in PaymentType"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="开票状态" prop="state">
                  <el-select
                    v-model="contractForm.state"
                    clearable
                    disabled
                    placeholder="请选择"
                    :style="{ width: 'calc(25vw - 50%)' }"
                  >
                    <el-option
                      v-for="item in stateList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="合同负责人" prop="director">
                  <el-input
                    v-model="contractForm.director"
                    clearable
                    :style="{ width: 'calc(25vw - 50%)' }"
                    disabled
                  ></el-input>
                </el-form-item>
                <el-form-item label="原件归档位置" prop="archiveLocationName">
                  <el-select
                    v-model="contractForm.archiveLocation"
                    clearable
                    disabled
                    placeholder="请选择"
                    :style="{ width: 'calc(25vw - 50%)' }"
                  >
                    <el-option
                      v-for="item in archiveLocationNameList"
                      :key="item.archiveLocationId"
                      :label="item.archiveLocation"
                      :value="item.archiveLocationId"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-form>
              <div
                style="
                  display: flex;
                  align-items: center;
                  margin-bottom: 10px;
                  margin-left: 20px;
                  margin-top: 10px;
                "
              >
                <div class="blueBox"></div>
                <div style="font-size: large">其他信息</div>
              </div>
              <p
                style="margin-top: 10px; margin-bottom: 0px; margin-left: 20px"
              >
                备注(200字内)
              </p>
              <el-input
                type="textarea"
                :autosize="{ minRows: 6, maxRows: 8 }"
                placeholder="请输入内容"
                v-model="contractForm.remark"
                disabled
                maxlength="200"
                show-word-limit
                style="margin-left: 20px"
                :style="{ width: 'calc(30vw - 55%)' }"
              />
            </div>
          </div>
        </div>
        <div v-show="aciton == 1">
          <div
            style="display: flex; flex-direction: column"
            v-if="image404 === true"
          >
            <img
              src="../../../assets/images/404.png"
              style="height: 150px; width: 300px; margin: auto"
            />
            <div style="display: flex; margin: auto">
              <p>需先填写收(付)款类型、合同总额</p>
            </div>
          </div>
          <div v-if="image404 === false">
            <div style="display: flex; align-items: center">
              <p style="margin: 0 5px 20px 0">收(付)款类型:</p>
              <el-tag
                style="
                  font-size: 14px;
                  border-radius: 10px;
                  margin: 0 20px 20px 0;
                "
                :type="
                  contractForm.collectionAndPaymentTypes == '收款'
                    ? 'success'
                    : 'warning'
                "
                >{{ contractForm.collectionAndPaymentTypes }}</el-tag
              >
              <p style="margin: 0 20px 20px 0">
                合同总额(元)：{{ contractForm.allMoney }}
              </p>
              <p style="margin: 0 20px 20px 0">
                原合同金额(元)：{{ contractForm.money }}
              </p>
              <p style="margin: 0 20px 20px 0">
                附件金额(元)：{{ contractForm.allAppendicesMoney }}
              </p>
              <p style="margin: 0 20px 20px 0">
                未收(付)金额(元)：
                {{ AmountnotyetReceivedPaid }}
              </p>
              <p style="margin: 0 20px 20px 0">
                收付款状态：
                <el-tag
                  style="font-size: 14px; border-radius: 10px"
                  :type="collectionAndPaymentStateType"
                  >{{ contractForm.collectionAndPaymentState }}</el-tag
                >
              </p>
            </div>
            <el-table
              :data="paymentCollectionPlanList"
              style="width: 100%; border: 1px solid #ccc; border-radius: 5px"
              :fit="true"
              stripe
              header-align="center"
              max-height="300"
              :header-cell-style="{
                background: 'rgb(224, 241, 255)',
                color: '#606266',
              }"
              class="formClass"
            >
              <el-table-column
                type="index"
                label="序号"
                width="80"
                align="center"
              />
              <el-table-column label="发票金额(元)" align="center" width="150">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.invoiceAmount"
                    disabled
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column align="center" width="150">
                <template #header>
                  <i style="color: #f56c6c">*</i>
                  应收(付)金额(元)
                </template>
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.payableAmount"
                    disabled
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="应收(付)日期" align="center" width="180">
                <template slot-scope="scope">
                  <el-date-picker
                    v-model="scope.row.payableTime"
                    type="date"
                    disabled
                    clearable
                    placeholder="选择日期"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                  >
                  </el-date-picker>
                </template>
              </el-table-column>
              <el-table-column
                label="实收(付)金额(元)"
                align="center"
                width="150"
              >
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.actualPayableAmount"
                    disabled
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="实收(付)日期" align="center" width="180">
                <template slot-scope="scope">
                  <el-date-picker
                    v-model="scope.row.actualPayableTime"
                    type="date"
                    disabled
                    clearable
                    placeholder="选择日期"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                  >
                  </el-date-picker>
                </template>
              </el-table-column>
              <el-table-column align="center" width="150">
                <template #header>
                  <i style="color: #f56c6c">*</i>
                  收付款状态
                </template>
                <template slot-scope="scope">
                  <el-select
                    v-model="scope.row.state"
                    disabled
                    clearable
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in 4"
                      :key="item"
                      :label="item"
                      :value="item"
                    >
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="所属合同" align="center" width="150">
                <template slot-scope="scope">
                  <el-select
                    v-model="scope.row.contractAppendicesName"
                    disabled
                    clearable
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in contractAppendicesNameList"
                      :key="item.name"
                      :label="item.name"
                      :value="item.name"
                    >
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="发票说明" align="center" width="450">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.remark" disabled></el-input>
                </template>
              </el-table-column>
            </el-table>
            <div style="display: flex; align-items: center; margin-top: 45px">
              <div class="blueBox"></div>
              <div style="font-size: large">发票附件</div>
            </div>
            <div
              style="
                display: flex;
                align-items: center;
                overflow: auto;
                width: 80%;
              "
            >
              <div v-for="(item, index) in selectInvoiceVo" :key="index">
                <div class="bill">
                  <svg-icon
                    class-name="icon"
                    icon-class="bill"
                    style="width: 20px; height: 20px; margin-right: 5px"
                  />{{ item.code }}
                  <div class="Mask">
                    <svg-icon
                      class-name="icon"
                      icon-class="see02"
                      style="
                        width: 20px;
                        height: 20px;
                        margin-right: 5px;
                        cursor: pointer;
                      "
                      @click="Preview(item.pdfAddress)"
                    />
                    <svg-icon
                      class-name="icon"
                      icon-class="copy02"
                      style="
                        width: 20px;
                        height: 20px;
                        margin-right: 5px;
                        cursor: pointer;
                      "
                      @click="copyToClipboard(item.code)"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          v-for="(item, index) in contractAppendicesList"
          v-show="aciton == index + 2"
          style="display: flex"
        >
          <div style="width: 50%; background-color: rgb(240, 242, 245)">
            <div style="display: flex; align-items: center; width: 99%">
              <svg-icon
                class-name="icon"
                icon-class="pdf02"
                style="transform: scale(1.2); z-index: 999; margin: 20px"
              />
              <el-tooltip
                class="item"
                effect="dark"
                :content="nameList[index]"
                placement="top-start"
              >
                <p
                  style="
                    white-space: nowrap;
                    max-width: 200px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                  "
                >
                  {{ nameList[index] }}
                </p>
              </el-tooltip>
              <svg-icon
                class-name="icon"
                icon-class="download02"
                style="
                  transform: scale(1.2);
                  z-index: 999;
                  margin: 20px;
                  margin-left: auto;
                  cursor: pointer;
                "
                @click="downloadAppendix(urlList[index])"
              />
            </div>
            <div
              class="imageView"
              @mouseenter="isHovered = true"
              @mouseleave="isHovered = false"
            >
              <svg-icon
                v-if="isHovered"
                class-name="icon"
                icon-class="right"
                @click="nextPageInList(index)"
                class="directionRight"
              />
              <svg-icon
                v-if="isHovered"
                class-name="icon"
                icon-class="left"
                @click="prePageInList(index)"
                class="directionLeft"
              />
              <div class="pdf-container">
                <pdf
                  :page="pdfStatusPage[index]"
                  :src="urlList[index]"
                  @progress="loadedRatio = $event"
                  @num-pages="getpageTotalNum($event, index)"
                  style="width: 100%; margin-left: 10px"
                ></pdf>
              </div>
            </div>
            <div style="margin: 10px; color: rgb(110, 114, 115)">
              当前页数：{{ pdfStatusPage[index] }} / {{ pdfStatus[index] }}
            </div>
          </div>
          <div style="width: 25%; margin: 10px; height: 680px; overflow: auto">
            <div
              style="
                display: flex;
                align-items: center;
                margin-bottom: 10px;
                margin-left: 20px;
              "
            >
              <div class="blueBox"></div>
              <div style="font-size: large">附件信息</div>
            </div>
            <div>
              <el-form
                ref="contractAppendicesListRef"
                :model="contractAppendicesList[index]"
                :inline="true"
                label-width="80px"
                label-position="top"
                style="margin-left: 20px"
                class="formClass"
              >
                <el-form-item
                  label="附件名称"
                  prop="name"
                  :rules="[
                    {
                      required: true,
                      message: '请输入附件名称',
                      trigger: 'change',
                    },
                  ]"
                >
                  <el-input
                    v-model="contractAppendicesList[index].name"
                    clearable
                    :style="{ width: 'calc(25vw - 50%)' }"
                    disabled
                  ></el-input>
                </el-form-item>
                <el-form-item label="附件金额（元）" prop="money">
                  <el-input
                    v-model="contractAppendicesList[index].money"
                    clearable
                    :style="{ width: 'calc(25vw - 50%)' }"
                    disabled
                  ></el-input>
                </el-form-item>
                <el-form-item label="附件生效日期" prop="effectiveTime">
                  <el-date-picker
                    v-model="contractAppendicesList[index].effectiveTime"
                    type="date"
                    clearable
                    disabled
                    :style="{ width: 'calc(25vw - 50%)' }"
                    placeholder="选择日期"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="附件终止日期" prop="terminationTime">
                  <el-date-picker
                    v-model="contractAppendicesList[index].terminationTime"
                    type="date"
                    placeholder="选择日期"
                    clearable
                    :style="{ width: 'calc(25vw - 50%)' }"
                    disabled
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="附件签订日期" prop="signingTime">
                  <el-date-picker
                    v-model="contractAppendicesList[index].signingTime"
                    type="date"
                    placeholder="选择日期"
                    disabled
                    :style="{ width: 'calc(25vw - 50%)' }"
                    clearable
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="附件负责人" prop="director">
                  <el-input
                    v-model="contractAppendicesList[index].director"
                    disabled
                    :style="{ width: 'calc(25vw - 50%)' }"
                    clearable
                  ></el-input>
                </el-form-item>
                <el-form-item label="原件归档位置" prop="archiveLocationId">
                  <el-select
                    v-model="contractAppendicesList[index].archiveLocationId"
                    disabled
                    :style="{ width: 'calc(25vw - 50%)' }"
                    clearable
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in archiveLocationNameList"
                      :key="item.archiveLocationId"
                      :label="item.archiveLocation"
                      :value="item.archiveLocationId"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <div
                  style="
                    display: flex;
                    align-items: center;
                    margin-bottom: 10px;
                    margin-top: 10px;
                  "
                >
                  <div class="blueBox"></div>
                  <div style="font-size: large">其他信息</div>
                </div>
                <p style="margin-top: 10px; margin-bottom: 0px">
                  备注(200字内)
                </p>
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 6, maxRows: 8 }"
                  placeholder="请输入内容"
                  disabled
                  v-model="contractAppendicesList[index].remark"
                  maxlength="200"
                  show-word-limit
                  :style="{ width: 'calc(30vw - 55%)' }"
                />
              </el-form>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="open = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listBelongingCompany } from "@/api/contract/BelongingCompany";
import {
  listContractByContractProject,
  addContractProject,
  getContractProject,
  updateContractProject,
} from "@/api/contract/ContractProject";
import { listContractCategorybyBelongingCompanyId } from "@/api/contract/ContractCategory";
import { getContract } from "@/api/contract/Contract";
import { listContractParty } from "@/api/contract/ContractParty";
import { listArchiveLocation } from "@/api/contract/ArchiveLocation";
import { mapState } from "vuex";
import pdf from "vue-pdf";
export default {
  computed: {
    ...mapState({ sidebar: (state) => state.app.sidebar.opened }),
  },
  components: {
    pdf,
  },
  data() {
    return {
      open: false,
      aciton: 0,
      contractAppendicesList: [],
      isHovered: false,
      url: "",
      PdfpageNum: 1,
      loadedRatio: 0,
      pageTotalNum: 1,
      pdfStatus: [],
      contractPartyNameList: [],
      paymentCollectionPlanList: [],
      nameList: [],
      //签约方label列表
      contractingPartyLabelList: [
        "甲方",
        "乙方",
        "丙方",
        "丁方",
        "戊方",
        "己方",
        "庚方",
      ],
      //签约方选择列表
      contractingPartyValueList: [],
      //合同类型
      options: [
        {
          label: "销项合同",
          value: "销项合同",
        },
        {
          label: "进项合同",
          value: "进项合同",
        },
        {
          label: "其他",
          value: "其他",
        },
      ],
      //合同类别列表：
      contractCategoriesList: [],
      formList: [
        {
          labelList: [
            {
              label: "项目名称",
              prop: "name",
              type: "el-input",
              span: 6.5,
              components: {
                placeholder: "请输入",
                disabled: false,
                clearable: true,
                style: {
                  width: "150px",
                },
              },
            },
            {
              label: "项目所属公司",
              prop: "belongingCompanyId",
              span: 6.5,
              type: "el-select",
              components: {
                placeholder: "请选择",
                disabled: false,
                clearable: true,
                events: {
                  change: this.CompanyModification,
                },
                style: {
                  width: "150px",
                },
                option: {
                  key: "belongingCompanyId",
                  label: "name",
                  value: "belongingCompanyId",
                  list: [],
                },
              },
            },
            {
              label: "项目时长",
              prop: "timeSeries",
              span: 6.5,
              type: "el-date-picker",
              if: false,
              components: {
                disabled: false,
                clearable: true,
                placeholder: "请输入",
                type: "daterange",
                "range-separator": "至",
                "start-placeholder": "开始日期",
                "end-placeholder": "结束日期",
                format: "yyyy-MM-dd",
                editable: false,
                events: {
                  input: this.changeInsertShow,
                },
                "value-format": "yyyy-MM-dd",
                style: {
                  width: "300px",
                },
              },
            },
            {
              label: "项目是否结束",
              prop: "state",
              span: 4.5,
              type: "el-select",
              components: {
                disabled: false,
                placeholder: "请选择",
                clearable: true,
                style: {
                  width: "100px",
                },
                option: {
                  key: "value",
                  label: "label",
                  value: "value",
                  list: [
                    { label: "已结束", value: "已结束" },
                    { label: "进行中", value: "进行中" },
                  ],
                },
              },
            },
          ],
        },
      ],
      form: {
        name: "",
        belongingCompanyId: "",
        timeSeries: [],
        startTime: "",
        endTime: "",
        state: "",
        remark: "",
      },
      //合同列表
      belongingCompanyList: [],
      submitButton: "",
      formDisable: "",
      rules: {
        name: [
          {
            required: true,
            message: "项目名称不能为空",
            trigger: "blur",
          },
        ],
        belongingCompanyId: [
          {
            required: true,
            message: "项目所属公司不能为空",
            trigger: "change",
          },
        ],
      },
      buttonList: [
        {
          text: "取消",
          methods: this.Cancel,
        },
        {
          text: "返回",
          type: "primary",
          methods: this.Cancel,
        },
      ],
      PaymentType: [],
      pdfStatusPage: [],
      urlList: [],
      stateList: [],
      archiveLocationNameList: [],
      contractForm: {
        contractCategoryName: null,
        belongingCompanyId: null,
        type: null,
        contractCategoryId: null,
        effectiveTime: null,
        terminationTime: null,
        signingTime: null,
        belongingYear: null,
        money: null,
        collectionAndPaymentTypes: null,
        state: null,
        remark: null,
        archiveLocation: null,
        director: null,
      },
      //进项合同列表
      enterTableList: [],
      //进项合同搜索
      enterContractForm: {},
      //进项合同多选框
      enterTableListContractIds: [],
      //销项合同列表
      destroyTableList: [],
      //销项合同搜索
      destroyContractForm: {},
      //销项合同多选框
      destroyTableListContractIds: [],
      tableData: [],
      //合同弹窗
      contractDialog: false,
      contractTitle: "",
      contractList: [],
      //搜索form
      contractSearchform: {
        name: "",
        type: "",
        belongingCompanyId: "",
        contractCategoryName: "",
        contractCategoryId: "",
        contractPartyNameList: "",
        contractIds: "",
        partyString: "",
        contractIdsList: [],
      },
      contractformList: [],
      contractformIdList: [],
      ContractCategory: [],
      selectInvoiceVo: [],
      collectionAndPaymentStateType: "",
      image404: false,
      //签约方label列表
      contractingPartyLabelList: [
        "甲方",
        "乙方",
        "丙方",
        "丁方",
        "戊方",
        "己方",
        "庚方",
      ],
      //未（收）付金额
      AmountnotyetReceivedPaid: "",
    }; //这里存放数据
  },
  watch: {
    aciton() {
      this.typeChange();
    },
    sidebar(newvalue) {
      if (newvalue == false) {
        this.formList[0].labelList[3].components.style.width = "200px";
      } else if (newvalue == true) {
        this.formList[0].labelList[3].components.style.width = "100px";
      }
    },
  },
  methods: {
    //收付款类型选择判断
    typeChange() {
      if (!this.contractForm.contractId) {
        if (this.contractForm.collectionAndPaymentTypes == "收款") {
          this.contractForm.collectionAndPaymentState = "未收款";
        } else if (this.contractForm.collectionAndPaymentTypes == "付款") {
          this.contractForm.collectionAndPaymentState = "未付款";
        }
      }
      if (
        this.contractForm.collectionAndPaymentState === "已收款" ||
        this.contractForm.collectionAndPaymentState === "已付款"
      ) {
        this.collectionAndPaymentStateType = "success";
      } else if (
        this.contractForm.collectionAndPaymentState === "部分收款" ||
        this.contractForm.collectionAndPaymentState === "部分付款"
      ) {
        this.collectionAndPaymentStateType = "primary";
      } else if (
        this.contractForm.collectionAndPaymentState === "未收款" ||
        this.contractForm.collectionAndPaymentState === "未付款"
      ) {
        this.collectionAndPaymentStateType = "warning";
      }
      if (
        !this.contractForm.contractId &&
        ((this.contractForm.money == undefined &&
          !this.contractAppendicesList.some((item) => item.money)) ||
          this.contractForm.collectionAndPaymentTypes == undefined)
      ) {
        this.image404 = true;
      } else if (
        !this.contractForm.contractId &&
        (this.contractForm.money !== "" ||
          this.contractAppendicesList.some((item) => item.money) ||
          this.contractForm.collectionAndPaymentTypes !== "")
      ) {
        this.image404 = false;
      } else if (
        !this.contractForm.contractId &&
        (((this.contractForm.money == "" || this.contractForm.money == null) &&
          (this.contractAppendicesList.some((item) => item.money == "") ||
            this.contractAppendicesList.some((item) => item.money == null))) ||
          this.contractForm.collectionAndPaymentTypes == "" ||
          this.contractForm.collectionAndPaymentTypes == null)
      ) {
        this.image404 = true;
      }
    },
    /** 查看按钮操作 */
    handleUpdate(row) {
      this.contractAppendicesNameList = [
        {
          name: "原文件",
        },
      ];
      getContract(row.contract.contractId).then((res) => {
        if (res.code == 200) {
          this.open = true;
          //合同form
          this.contractForm = res.data.contract;
          this.contractForm.belongingYear =
            this.contractForm.belongingYear.toString();
          //签约方列表
          if (res.data.contractPartyNameList.length == 0) {
            this.contractPartyNameList = [
              {
                value: "",
              },
            ];
          } else {
            this.contractPartyNameList = res.data.contractPartyNameList.map(
              (item, index) => ({
                value: item,
              })
            );
          }
          //附件列表
          this.contractAppendicesList = res.data.contractAppendicesList;
          //附件选择框
          this.contractAppendicesList.forEach((item, index) => {
            this.contractAppendicesNameList.push({
              name: "附件-" + index + 1,
            });
          });
          //pdf展示路径
          this.url =
            process.env.VUE_APP_BASE_API + res.data.contract.pdfAddress;
          //附件pdf展示初始化
          this.contractAppendicesList.forEach((item, index) => {
            this.urlList[index] =
              process.env.VUE_APP_BASE_API + item.pdfAddress;
            this.pdfStatusPage[index] = 1;
            this.nameList[index] = this.getFileByContractAppendicesList(
              this.urlList[index]
            );
          });
          //收付款计划列表
          this.paymentCollectionPlanList = res.data.paymentCollectionPlanList;
          //发票
          this.selectInvoiceVo = res.data.selectInvoiceVo;
          if (
            this.contractForm.collectionAndPaymentState === "已收款" ||
            this.contractForm.collectionAndPaymentState === "已付款"
          ) {
            this.collectionAndPaymentStateType = "success";
          } else if (
            this.contractForm.collectionAndPaymentState === "部分收款" ||
            this.contractForm.collectionAndPaymentState === "部分付款"
          ) {
            this.collectionAndPaymentStateType = "primary";
          } else if (
            this.contractForm.collectionAndPaymentState === "未收款" ||
            this.contractForm.collectionAndPaymentState === "未付款"
          ) {
            this.collectionAndPaymentStateType = "danger";
          }
          this.AmountnotyetReceivedPaid =
            Number(this.contractForm.allMoney || 0) -
            Number(this.contractForm.paidPayment || 0);
          this.getBelongingCompany();
          this.getlistContractParty();
          listContractCategorybyBelongingCompanyId(
            res.data.contract.belongingCompanyId
          ).then((res) => {
            this.contractCategoriesList = res.data;
          });
          this.getlistContractParty();
          this.getListArchiveLocation();
          this.typeChange();
          this.image404 = false;
        }
      });
    },
    //获取原件归档位置list
    getListArchiveLocation() {
      listArchiveLocation({ pageNum: 1, pageSize: 999 }).then((res) => {
        this.archiveLocationNameList = res.rows;
      });
    },
    //获取签约方列表
    getlistContractParty() {
      listContractParty({ pageNum: 1, pageSize: 999 }).then((res) => {
        this.contractingPartyValueList = res.rows;
      });
    },
    //获取公司列表
    getBelongingCompany() {
      listBelongingCompany().then((res) => {
        this.belongingCompanyList = res.rows;
      });
    },
    //复制方法
    async copyToClipboard(str) {
      const text = str.trim(); // 去除多余空白
      try {
        await navigator.clipboard.writeText(text);
        this.$modal.msgSuccess("复制成功");
        return;
      } catch (error) {
        console.error(error);
      }
      const el = document.createElement("textarea");
      el.value = text;
      el.setAttribute("readonly", "");
      el.style.position = "absolute";
      el.style.left = "-9999px";
      document.body.appendChild(el);
      const selected =
        document.getSelection().rangeCount > 0
          ? document.getSelection().getRangeAt(0)
          : false;
      el.select();
      document.execCommand("copy");
      document.body.removeChild(el);
      if (selected) {
        document.getSelection().removeAllRanges();
        document.getSelection().addRange(selected);
      }
      this.$modal.msgSuccess("复制成功");
    },
    //项目时长选择框修改
    changeInsertShow(value) {
      this.formList[0].labelList[2].if = true;
      if (value !== null) {
        //设置
        this.$set(this.form.timeSeries, 0, value[0]); //数组的索引响应式需要使用 $set
        this.$set(this.form.timeSeries, 1, value[1]);
      } else {
        if (this.form.timeSeries !== null) {
          //清空
          this.$set(this.form.timeSeries, 0, "");
          this.$set(this.form.timeSeries, 1, "");
        }
      }
      this.$nextTick(() => {
        this.formList[0].labelList[2].if = false;
      });
    },
    //预览方法
    Preview(value) {
      let url = process.env.VUE_APP_BASE_API + value;
      window.open(url, "_blank");
    },
    //pdf附件展示上传回调
    uploadFile(file) {
      this.url = process.env.VUE_APP_BASE_API + file.fileName;
      const file02 = file.url.split("/");
      this.document = file02[file02.length - 1];
      this.contractForm.pdfAddress = file.fileName;
    },
    //文件导入按钮事件
    uploadFileHandleAdd(file) {
      this.url = process.env.VUE_APP_BASE_API + file.fileName;
      const file02 = file.url.split("/");
      this.document = file02[file02.length - 1];
      this.contractForm.pdfAddress = file.fileName;
      this.handleAdd();
    },
    //获取附件url
    getUrl(value) {
      if (value !== "") {
        const url = process.env.VUE_APP_BASE_API + value;
        return url;
      }
      return "";
    },
    //pdf下载按钮
    download() {
      window.open(this.url, "_blank");
    },
    //附件pdf下载按钮
    downloadAppendix(value) {
      window.open(value, "_blank");
    },
    //上一页
    prePage() {
      if (this.PdfpageNum > 1) {
        this.PdfpageNum--;
      } else {
        this.$message({
          message: "已到达第一页",
          type: "warning",
        });
      }
    },
    //获取页码
    getpageTotalNum(value, index) {
      this.pdfStatus[index] = value;
    },
    //下一页
    nextPage() {
      if (this.PdfpageNum < this.pageTotalNum) {
        this.PdfpageNum++;
      } else {
        this.$message({
          message: "已到达最后一页",
          type: "warning",
        });
      }
    },
    //附件中上一页
    prePageInList(index) {
      if (this.pdfStatusPage[index] > 1) {
        this.pdfStatusPage[index]--;
      } else {
        this.$message({
          message: "已到达第一页",
          type: "warning",
        });
      }
    },
    //附件中下一页
    nextPageInList(index) {
      if (this.pdfStatusPage[index] < this.pdfStatus[index]) {
        this.pdfStatusPage[index]++;
      } else {
        this.$message({
          message: "已到达最后一页",
          type: "warning",
        });
      }
    },
    //附件获取图片名称
    getFileByContractAppendicesList(pdfAddress) {
      const url = process.env.VUE_APP_BASE_API + pdfAddress;
      if (pdfAddress !== "") {
        const file02 = url.split("/");
        return file02[file02.length - 1];
      }
      return "空";
    },
    //初始化
    getContractProjectByContractProjectId() {
      getContractProject(this.$route.query.contractProjectId).then((res) => {
        this.form = res.data.contractProject;
        this.form.timeSeries = [];
        if (
          res.data.contractProject.startTime &&
          res.data.contractProject.endTime
        ) {
          this.form.timeSeries[0] = res.data.contractProject.startTime;
          this.form.timeSeries[1] = res.data.contractProject.endTime;
        }
        this.getlistContractCategorybyBelongingCompanyId();
        this.enterTableList = res.data.incomeContractList;
        this.destroyTableList = res.data.outputContractList;
      });
    },
    //对进项合同搜索方法 - 查看
    FindByEnterTableList() {
      this.getContractProjectByContractProjectId();
      setTimeout(() => {
        // 逻辑

        const result = this.enterTableList.filter((item) => {
          const contract = item.contract;
          const contractPartyNameList = item.contractPartyNameList;

          // 判断 name 和 code 是否模糊匹配
          const isContractMatch =
            (!this.enterContractForm.name ||
              contract.name.includes(this.enterContractForm.name)) &&
            (!this.enterContractForm.contractCategoryId ||
              contract.contractCategoryId ==
                this.enterContractForm.contractCategoryId);

          // 判断 partyString 是否模糊匹配 contractPartyNameList 中的任意一项
          const isPartyStringMatch = this.enterContractForm.partyString
            ? contractPartyNameList.some((party) =>
                party.includes(this.enterContractForm.partyString)
              )
            : true;
          return isContractMatch && isPartyStringMatch;
        });

        this.enterTableList = result;
      }, 500);
    },
    //对进项合同重置方法
    FindByEnterTableListClear() {
      this.enterContractForm = {
        partyString: "",
        contractCategoryId: "",
        name: "",
      };
      this.FindByEnterTableList();
    },
    //对销项合同重置方法
    FindByDestroyTableListClear() {
      this.destroyContractForm = {
        name: "",
        contractCategoryId: "",
        partyString: "",
      };
      this.FindByDestroyTableList();
    },
    //对销项合同搜索方法 - 查看
    FindByDestroyTableList() {
      this.getContractProjectByContractProjectId();
      setTimeout(() => {
        const result = this.destroyTableList.filter((item) => {
          const contract = item.contract;
          const contractPartyNameList = item.contractPartyNameList;

          // 判断 name 是否模糊匹配
          const isContractMatch =
            (!this.destroyContractForm.name ||
              contract.name.includes(this.destroyContractForm.name)) &&
            (!this.destroyContractForm.contractCategoryId ||
              contract.contractCategoryId ==
                this.destroyContractForm.contractCategoryId);

          // 判断 partyString 是否模糊匹配 contractPartyNameList 中的任意一项
          const isPartyStringMatch = this.destroyContractForm.partyString
            ? contractPartyNameList.some((party) =>
                party.includes(this.destroyContractForm.partyString)
              )
            : true;

          return isContractMatch && isPartyStringMatch;
          // return isContractMatch;
          // return isPartyStringMatch;
        });

        this.destroyTableList = result;
      }, 500);
    },
    //项目所属公司修改事件
    CompanyModification() {
      if (
        this.enterTableList.length !== 0 ||
        this.destroyTableList.length !== 0
      ) {
        this.$modal
          .confirm("变更项目所属公司将删除已选信息，重新填写内容，是否继续？")
          .then(() => {
            this.enterTableList = [];
            this.destroyTableList = [];
          })
          .catch(() => {
            getContractProject(this.$route.query.contractProjectId).then(
              (res) => {
                this.form.belongingCompanyId =
                  res.data.contractProject.belongingCompanyId;
              }
            );
          });
      }
    },
    //获取公司列表
    getlistBelongingCompany() {
      if (this.$route.query.title == "查看项目信息") {
        this.getContractProjectByContractProjectId();
        this.submitButton = "1";
        this.formList[0].labelList[0].components.disabled = true;
        this.formList[0].labelList[1].components.disabled = true;
        this.formList[0].labelList[2].components.disabled = true;
        this.formList[0].labelList[3].components.disabled = true;
        this.formDisable = true;
        this.buttonList = [
          {
            text: "返回",
            type: "primary",
            methods: this.Cancel,
          },
        ];
      } else if (this.$route.query.title == "修改项目信息") {
        this.getContractProjectByContractProjectId();
        this.submitButton = null;
        this.formDisable = false;
        this.buttonList = [
          {
            text: "取消",
            methods: this.Cancel,
          },
        ];
      } else {
        this.submitButton = null;
        this.formDisable = false;
        this.buttonList = [
          {
            text: "取消",
            methods: this.Cancel,
          },
        ];
      }
      listBelongingCompany().then((res) => {
        this.formList[0].labelList[1].components.option.list = res.rows;
      });
    },
    //打开弹窗前置事件
    prefix(row) {
      if (this.form.belongingCompanyId == "") {
        this.$message({
          message: "请选择项目所属公司",
          type: "warning",
        });
        return "error";
      }
      this.contractDialog = true;
      this.contractTitle = row.title;
      this.contractSearchform.type = row.type;
      this.contractSearchform.belongingCompanyId = this.form.belongingCompanyId;
      this.contractformList = [
        { label: "进项合同", value: "进项合同" },
        { label: "销项合同", value: "销项合同" },
      ];
      if (row.title == "进项合同选择") {
        this.contractSearchform.contractIds = this.enterTableList
          .map((item) => item.contract.contractId)
          .join(",");
      } else if (row.title == "销项合同选择") {
        this.contractSearchform.contractIds = this.destroyTableList
          .map((item) => item.contract.contractId)
          .join(",");
      }
    },
    //打开弹窗前置事件02
    prefix02() {
      //获取合同列表
      listContractByContractProject(this.contractSearchform).then((res) => {
        this.contractList = res.rows;
      });
      //获取合同类别列表
      listContractCategorybyBelongingCompanyId(
        this.contractSearchform.belongingCompanyId
      ).then((res) => {
        this.ContractCategory = res.data;
      });
    },
    //获取合同类别列表
    getlistContractCategorybyBelongingCompanyId() {
      listContractCategorybyBelongingCompanyId(
        this.form.belongingCompanyId
      ).then((res) => {
        this.ContractCategory = res.data;
      });
    },
    //进项合同添加按钮与搜索
    enterContract() {
      const a = this.prefix({ title: "进项合同选择", type: "进项合同" });
      if (a !== "error") {
        this.prefix02();
      }
    },
    //销项合同添加按钮
    destroyContract() {
      const a = this.prefix({ title: "销项合同选择", type: "销项合同" });
      if (a !== "error") {
        this.prefix02();
      }
    },
    //弹窗页面多选框
    handleSelectionChange(val) {
      this.contractSearchform.contractIdsList = val;
    },
    //进项合同多选框
    handleSelectionChangeForEnterTableList(val) {
      this.enterTableListContractIds = val;
    },
    //销项合同多选框
    handleSelectionChangeForDestroyTableList(val) {
      this.destroyTableListContractIds = val;
    },
    //进项弹窗确定
    EnterConfirmSelection() {
      this.contractSearchform.contractIdsList.forEach((item) => {
        this.enterTableList.push(item);
      });
      this.contractDialog = false;
    },
    //销项弹窗确定
    destroyConfirmSelection() {
      this.contractSearchform.contractIdsList.forEach((item) => {
        this.destroyTableList.push(item);
      });
      this.contractDialog = false;
    },
    //进项弹窗搜索条件清除
    EnterClearn() {
      this.contractSearchform.name = null;
      this.contractSearchform.partyString = null;
      this.contractSearchform.contractCategoryId = null;
      this.enterContract();
    },
    //销项弹窗搜索条件清除
    destroyClearn() {
      this.contractSearchform.name = null;
      this.contractSearchform.partyString = null;
      this.contractSearchform.contractCategoryId = null;
      this.destroyContract();
    },

    //进项合同删除按钮
    delForEnterTableList(row) {
      this.$modal
        .confirm("此操作将会删除数据，是否继续？")
        .then(() => {
          const index = this.enterTableList.findIndex(
            (item) => item.contract.contractId == row.contract.contractId
          );
          if (index !== -1) {
            this.enterTableList.splice(index, 1);
          }
        })
        .then(() => {
          this.$modal.msgSuccess("删除成功");
        });
    },
    //销项合同删除按钮
    delForDestroyTableList(row) {
      this.$modal
        .confirm("此操作将会删除数据，是否继续？")
        .then(() => {
          const index = this.destroyTableList.findIndex(
            (item) => item.contract.contractId == row.contract.contractId
          );
          if (index !== -1) {
            this.destroyTableList.splice(index, 1);
          }
        })
        .then(() => {
          this.$modal.msgSuccess("删除成功");
        });
    },
    //批量删除进项合同
    delForEnterTableListByList() {
      this.$modal
        .confirm("此操作将会删除选中的数据，是否继续？")
        .then(() => {
          // 批量删除逻辑
          this.enterTableListContractIds.forEach((selectedRow) => {
            const index = this.enterTableList.findIndex(
              (item) =>
                item.contract.contractId === selectedRow.contract.contractId
            );
            if (index !== -1) {
              this.enterTableList.splice(index, 1);
            }
          });
        })
        .then(() => {
          this.$modal.msgSuccess("删除成功");
        });
    },
    //批量删除销项合同
    delForDestroyTableListByList() {
      this.$modal
        .confirm("此操作将会删除选中的数据，是否继续？")
        .then(() => {
          // 批量删除逻辑
          this.destroyTableListContractIds.forEach((selectedRow) => {
            const index = this.destroyTableList.findIndex(
              (item) =>
                item.contract.contractId === selectedRow.contract.contractId
            );
            if (index !== -1) {
              this.destroyTableList.splice(index, 1);
            }
          });
        })
        .then(() => {
          this.$modal.msgSuccess("删除成功");
        });
    },
    //取消按钮
    Cancel() {
      this.$router.push({
        path: "/contract/ContractProject",
        query: {
          getList: "123",
        },
      });
    },
    //提交按钮
    submitForm() {
      this.form.startTime = this.form.timeSeries[0];
      this.form.endTime = this.form.timeSeries[1];
      if (this.$route.query.title == "新增项目信息") {
        //添加逻辑

        let contractIds = [
          ...this.destroyTableList.map((item) => item.contract.contractId),
          ...this.enterTableList.map((item) => item.contract.contractId),
        ];
        addContractProject({
          contractProject: this.form,
          contractIds: contractIds,
        }).then((res) => {
          this.$modal.msgSuccess("操作成功");
          this.Cancel();
        });
      } else if (this.$route.query.title == "修改项目信息") {
        //修改逻辑

        let contractIds = [
          ...this.destroyTableList.map((item) => item.contract.contractId),
          ...this.enterTableList.map((item) => item.contract.contractId),
        ];
        updateContractProject({
          contractProject: this.form,
          contractIds: contractIds,
        }).then((res) => {
          this.$modal.msgSuccess("操作成功");
          this.Cancel();
        });
      }
    },
  }, //方法集合
  created() {
    this.getlistBelongingCompany();
  }, //生命周期 - 创建完成(可以访问当前this实例)
  mounted() {}, //生命周期 - 挂载完成（可以访问DOM元素）
};
</script>
<style scoped>
.slot1 {
  width: 150px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.slot4 {
  width: 150px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.icon {
  cursor: pointer;
  color: white;
  margin: 5px;
}
::v-deep .el-dialog {
  position: fixed;
  height: fit-content;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  margin: auto !important;
  border-radius: 5px !important;
}
::v-deep .el-dialog__header {
  background-color: rgb(248, 250, 251); /* 你可以根据需求修改颜色 */
  color: rgb(99, 86, 110); /* 标题文字颜色 */
  border-radius: 5px !important;
}
::v-deep .el-dialog__body {
  max-height: calc(100vh - 150px);
  min-height: calc(100vh - 150px);
  overflow: auto;
  border-top: 1px solid #dfdfdf;
  border-bottom: 1px solid #dfdfdf;
}
.tit_box {
  display: flex;
  justify-content: start;
  align-items: center;
  .act_tit {
    position: relative;
    font-weight: 700;
    font-size: 16px;
    color: #000000;
    margin-right: 30px;
    cursor: pointer;
  }
  .act_tit::before {
    content: "";
    position: absolute;
    width: 42px;
    height: 3px;
    left: calc(50% - 21px);
    bottom: -5px;
    background-color: #1896fc;
  }
  .tit {
    position: relative;
    font-size: 16px;
    color: #6f6f6f;
    margin-right: 30px;
    cursor: pointer;
  }
}
.pdf-container {
  width: 100%;
  height: 600px; /* 可以根据需要调整高度 */
  overflow-y: auto; /* 超出时显示滚动条 */
}
/* 设置滚动条宽度 */
.pdf-container::-webkit-scrollbar {
  height: 8px; /* 滚动条宽度 */
}
.imageView {
  width: 100%; /* 可以根据需要调整 */
  height: 600px;
  overflow-y: auto;
  position: relative;
}
.directionLeft {
  transform: scale(2);
  position: absolute;
  top: 45%;
  z-index: 999;
  left: 10px;
  cursor: pointer;
}
.directionRight {
  transform: scale(2);
  position: absolute;
  top: 45%;
  z-index: 999;
  right: 10px;
  cursor: pointer;
}
.bill {
  margin-top: 10px;
  white-space: nowrap;
  padding: 10px 8px;
  text-align: center;
  background-color: #f4f4f4;
  color: #fff;
  border-radius: 5px;
  margin-right: 20px;
  color: #5297f7;
  position: relative;
  display: flex;
  align-items: center;
}
.Mask {
  display: none !important;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  background-color: rgb(33, 38, 41);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-radius: 5px;
  opacity: 0.8;
}
.bill:hover .Mask {
  display: flex !important;
}
.blueBox {
  background-color: #39f;
  width: 4px;
  height: 20px;
  margin-right: 10px;
  border-radius: 3px;
}

::v-deep .formClass .el-form-item__label {
  padding: 0;
}
::v-deep .formClass .el-form-item {
  margin: 5px;
}
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  height: 8px; /* 设置水平滚动条的高度 */
}
/* 当达到最大长度时，计数器颜色变为红色 */
.input-limit-reached ::v-deep .el-input__count {
  color: red !important;
}
</style>
